<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>首页</title>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'primary': '#269b9e',
                    }
                }
            }
        }
    </script>
    <style>
        /* 自定义样式 */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        /* 美化滚动条 */
        ::-webkit-scrollbar {
            width: 7px;
            height: 7px;
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #b2e0e3;
            border-radius: 6px;
            min-height: 30px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #269b9e;
        }

        ::-webkit-scrollbar-corner {
            background: transparent;
        }

        /* Firefox */
        html {
            scrollbar-width: thin;
            scrollbar-color: #b2e0e3 #f3f3f3;
        }

        /* iframe内容区域 - 占据全部可用空间 */
        #iframe-container {
            width: 100%;
            margin-top: 64px;
        }

        #iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* 美化主页面滚动条 */
        ::-webkit-scrollbar {
            width: 7px;
            height: 7px;
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #b2e0e3;
            border-radius: 6px;
            min-height: 30px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #269b9e;
        }

        ::-webkit-scrollbar-corner {
            background: transparent;
        }

        html {
            scrollbar-width: thin;
            scrollbar-color: #b2e0e3 #f3f3f3;
        }

        /* 美化 iframe 内嵌页面滚动条 */
        #iframe::-webkit-scrollbar {
            width: 7px;
            height: 7px;
            background: transparent;
        }

        #iframe::-webkit-scrollbar-thumb {
            background: #b2e0e3;
            border-radius: 6px;
            min-height: 30px;
        }

        #iframe::-webkit-scrollbar-thumb:hover {
            background: #269b9e;
        }

        #iframe::-webkit-scrollbar-corner {
            background: transparent;
        }

        /* 底部信息栏样式调整 */
        #tabbar .company,
        #tabbar .record,
        #tabbar .desc {
            margin: 5px 0;
            padding: 5px;
        }
    </style>
</head>

<body class="bg-gray-100">
    <!-- 顶部导航栏 -->
    <div class="fixed top-0 left-0 w-full z-50 h-16 bg-primary shadow-md flex items-center px-8" id="header">
        <div class="flex-1 text-2xl font-bold text-white select-none">
            {{projectName}}
        </div>
        <ul class="flex space-x-4 items-center h-full">
            <li class="current">
                <a class="menumain text-gray-100 hover:text-primary hover:bg-white px-4 py-2 rounded-lg transition-colors duration-300"
                    href="javascript:navPage('./pages/home/home.html')">首页</a>
            </li>
            <li :key="index" v-for="(item, index) in indexNav">
                <a :href="'javascript:navPage(\'' + item.url + '\')'"
                    class="menumain text-gray-100 hover:text-primary hover:bg-white px-4 py-2 rounded-lg transition-colors duration-300">{{item.name}}</a>
            </li>
            <li>
                <a class="menumain text-gray-100 hover:text-primary hover:bg-white px-4 py-2 rounded-lg transition-colors duration-300"
                    href="javascript:centerPage();">个人中心</a>
            </li>
            <li>
                <a :href="adminurl"
                    class="menumain text-gray-100 hover:text-primary hover:bg-white px-4 py-2 rounded-lg transition-colors duration-300"
                    target="_blank">后台管理</a>
            </li>
            <li v-if="cartFlag">
                <a class="menumain text-gray-100 hover:text-primary hover:bg-white px-4 py-2 rounded-lg transition-colors duration-300"
                    href="javascript:navPage('./pages/shop-cart/list.html')">购物车</a>
            </li>
            <li v-if="chatFlag">
                <a class="menumain text-gray-100 hover:text-primary hover:bg-white px-4 py-2 rounded-lg transition-colors duration-300"
                    href="javascript:chatTap()">客服</a>
            </li>
        </ul>
    </div>

    <!-- iframe内容区域 - 占据全部可用空间 -->
    <div class="h-screen" id="iframe-container">
        <iframe id="iframe" src="./pages/home/home.html"></iframe>
    </div>

    <script src="./xznstatic/js/jquery-1.11.3.min.js"></script>
    <script src="./layui/layui.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/config.js"></script>

    <script>
        // 初始化Vue实例
        var vue = new Vue({
            el: '#header',
            data: {
                indexNav: indexNav,
                cartFlag: cartFlag,
                adminurl: "http://localhost:8080/ssm3j93s/admin/index.html",
                chatFlag: chatFlag,
                projectName: projectName,
            },
            mounted: function () {
                this.bindClickOnLi();
            },
            methods: {
                jump(url) {
                    jump(url);
                },
                bindClickOnLi() {
                    // 使用事件委托提高性能
                    document.querySelector('.navs ul').addEventListener('click', function (e) {
                        if (e.target.tagName === 'A') {
                            // 移除所有current类
                            document.querySelectorAll('.navs li').forEach(function (li) {
                                li.classList.remove('current');
                            });

                            // 给点击的li添加current类
                            e.target.closest('li').classList.add('current');
                        }
                    });
                }
            }
        });

        // 初始化Layui
        layui.use(['element', 'layer'], function () {
            var element = layui.element;
            var layer = layui.layer;
        });

        // 客服点击处理
        function chatTap() {
            var userTable = localStorage.getItem('userTable');
            if (userTable) {
                layui.layer.open({
                    type: 2,
                    title: '客服',
                    area: ['600px', '600px'],
                    content: './pages/chat/chat.html'
                });
            } else {
                window.location.href = './pages/login/login.html';
            }
        }

        // 导航栏跳转
        function navPage(url) {
            localStorage.setItem('iframeUrl', url);
            document.getElementById('iframe').src = url;
        }

        // 跳转到个人中心
        function centerPage() {
            var userTable = localStorage.getItem('userTable');
            if (userTable) {
                localStorage.setItem('iframeUrl', './pages/' + userTable + '/center.html');
                document.getElementById('iframe').src = './pages/' + userTable + '/center.html';
            } else {
                window.location.href = './pages/login/login.html';
            }
        }

        // 初始化iframe URL
        var iframeUrl = localStorage.getItem('iframeUrl');
        document.getElementById('iframe').src = iframeUrl || './pages/home/home.html';

        // 调整iframe高度
        function changeFrameHeight() {
            var iframe = document.getElementById('iframe');
            if (iframe) {
                try {
                    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                    if (iframeWin.document.body) {
                        iframe.height = iframeWin.document.body.scrollHeight;
                    }
                } catch (e) {
                    console.error("调整iframe高度出错:", e);
                }
            }
        }

        // 使用requestAnimationFrame优化resize事件
        let resizeTimer;
        window.addEventListener('resize', function () {
            cancelAnimationFrame(resizeTimer);
            resizeTimer = requestAnimationFrame(function () {
                changeFrameHeight();
            });
        });

        // 定期检查iframe高度
        setInterval(changeFrameHeight, 200);

        // 页面加载完成后调整一次高度
        window.addEventListener('load', changeFrameHeight);
    </script>
</body>

</html>